import React, { useEffect, useState } from 'react';
import styles from './index.less';

interface IProps {
  /**
   * 选择事件
   */
  onChange: (value: boolean) => void;
  /**
   * 选择值
   */
  value: boolean;
  /**
   * 文案
   */
  text: string;
}

const RadioSwitch = (props: IProps) => {
  const { onChange, value: _value, text } = props;
  const [value, setValue] = useState<boolean>();

  useEffect(() => {
    setValue(_value);
  }, [_value]);

  const _onChange = () => {
    setValue(!value);
    onChange && onChange(!value);
  };

  return (
    <div className={styles.container} onClick={_onChange}>
      <div className={value ? styles.outerCricle : styles.cricle}>
        <div className={styles.innerRricle}>{''}</div>
      </div>
      <div className={styles.text}>{text}</div>
    </div>
  );
};

export default RadioSwitch;
